<template>
  <el-dialog v-model="dialogVisible" :title="title" width="500px" :append-to-body="true" :before-close="handleClose">

    <el-form ref="ruleFormRef" v-loading="loading" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm" status-icon>
      
      <template v-if="title == '上传公章'">
        <el-form-item label="上传公章" prop="officialSeal">

         <el-upload class="avatar-uploaders" :action="HTTP_URI.UPLOADFILE" :show-file-list="false" :headers="headers"
          :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
          <img v-if="ruleForm.officialSeal" :src="ruleForm.officialSeal" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon">
            <Plus />
          </el-icon>
        </el-upload>
        <el-input placeholder="请输入" v-model="ruleForm.officialSeal" v-show="false" />
      </el-form-item>
      
      </template>
      <template v-else>
<el-form-item label="仓库编码" prop="houseCode">
        <el-input placeholder="请输入" v-model="ruleForm.houseCode" />
      </el-form-item>
      <el-form-item label="仓库名称" prop="houseName">
        <el-input placeholder="请输入" v-model="ruleForm.houseName" />
      </el-form-item>
      <el-form-item label="仓库地址" prop="address">
        <el-input placeholder="请输入" v-model="ruleForm.address" />
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input placeholder="请输入" type="textarea" :rows="3" :maxlength="200" show-word-limit v-model="ruleForm.remark" />
      </el-form-item>
      </template>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCloses(ruleFormRef)">取消</el-button>
        <el-button type="primary" @click="submit(ruleFormRef)">
          确 认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import HTTP_URI from '@/api/base_url'
import { ElMessage, FormInstance } from 'element-plus'
import { REQUEST } from '@/api/request'
import { getToken } from '@/plugins/cookie'
const ruleFormRef = ref<FormInstance>()
const title = ref('')
const dialogVisible = ref(false)
const headers = ref({
  'Token': getToken()
})
const loading = ref(false)
const emits = defineEmits(['ok'])
const ruleForm = ref({
  id: '',
  houseCode: '',
  houseName: '',
  address: '',
  remark: '',
  officialSeal:'',
  mailingAddress: '',
  postalCode: '',
  businessPhone: '',
  earningsCall: ''
})

const rules = ref({
  houseCode: [{ required: true, message: '请输入仓库编码', trigger: 'change' }],
  houseName: [{ required: true, message: '请输入仓库名称', trigger: 'change' }],
  address: [{ required: true, message: '请输入仓库地址', trigger: 'change' }],
  remark: [{ required: false, message: '请输入备注', trigger: 'change' }],
  officialSeal:[{required: true, message: '请上传公章', trigger: 'change' }]
})
const openModal = (t: any, e: any) => {
  ruleForm.value = {
    id: '',
    officialSeal:'',
    houseCode: '',
    houseName: '',
    address: '',
    remark: '',
  }
  dialogVisible.value = true
  title.value = t
  if (e) {
    ruleForm.value = e
  }
}
const handleClose = () => {
   loading.value = false
  dialogVisible.value = false
  emits('ok')
}
const handleAvatarSuccess = (response: any) => {
   loading.value = false
  ruleForm.value.officialSeal = response.data.url
}

const beforeAvatarUpload = (rawFile: any) => {
  loading.value = true
  if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png') {
    ElMessage.error('上传图片格式仅支持jpg、png')
     loading.value = false
    return false
  } else if (rawFile.size / 1024 / 1024 > 10) {
    ElMessage.error('图片大小不能超过 10MB')
     loading.value = false

    return false
  }
  return true
}
const handleCloses = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
   loading.value = false
  emits('ok')
  dialogVisible.value = false
}
const submit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      if (title.value === '新增仓库') {

        REQUEST.POST('HOUSEADD', ruleForm.value).then((res: any) => {
          if (res.status === 200) {
            ElMessage({
              type: 'success',
              message: '添加成功！'
            })
            formEl.resetFields()
            dialogVisible.value = false
            emits('ok')
          } else {
            ElMessage({
              type: 'warning',
              message: res.message
            })
          }
        })
      } else {
        REQUEST.POST('HOUSEEDIT', ruleForm.value).then((res: any) => {
          if (res.status === 200) {
            ElMessage({
              type: 'success',
              message: '编辑成功！'
            })
            dialogVisible.value = false
            formEl.resetFields()
            emits('ok')
          } else {
            ElMessage({
              type: 'warning',
              message: res.message
            })
          }
        })

      }
    }
  })
}
defineExpose({ openModal })
</script>

<style lang="scss" scoped>

.avatar-uploaders {
  width: 120px;
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px #dcdfe6 dashed;
  cursor: pointer;
  border-radius: 5px;
}

.avatar-uploaders:hover {
  border: 1px #409eff dashed;
}

.avatar-uploader-icon {
  font-size: 32px;
  color: #cccccc;
}

.avatar-uploaders .avatar {
  width: 120px;
  height: 120px;
  display: block;
}
</style>
